<template>
	<view class="gt-nav-pc bg-img bg-img-cover" style="background: url('/static/img/bg-login.png');">
		<view class="box  flex-center bg-fff box-shadow">
			<view class="box-logo">
				<view class="btn-nav pointer">
					<view class="row" style="border: 1px solid #666;padding: 8px;border-radius: 5px;" @click="changeNav()">
						<i-icon name="align-justify" size="22px" style="width: 22px;height: 22px;cursor: pointer;" @click="changeNav()"></i-icon>
					</view>
				</view>
				<gt-img :src="$var.apiUrl + '/img/logo.jpg'" style="width: 150px;height: 50px;"></gt-img>
			</view>
			<view class="row-auto"></view>
			<view class="row align-center xs-hidden mr-30">
				<view v-for="(item,index) in navList" :key="index" class="row row-center pointer nav-left-child"
					:class="router == 'pages'+item.url ?  'nav-left-active' : ''" @click="$skip.to(item.url)">
					<!-- <i-icon :name="item.icon" :color=" router == 'pages'+item.url ? '#fff' : ''" size="18px"></i-icon> -->
					<view class="">{{ $t(item.name) }}</view>
				</view>
			</view>
			<view class="row flex-center ">
				<gt-lang class="mr-10"></gt-lang>
				<view class="row xs-hidden" v-if="user_info">
					<view class="mr-15" @click="$skip.to('/user/index')">{{ user_info.user_name }}</view>
					<view class="btn btn-xs btn-default btn-circle-xs" @click="$skip.to('logout')">{{ $t('退出') }}</view>
				</view>
				<view v-else class="row ml-30 xs-hidden">
					<view class="btn btn-sm" @click="$skip.to('login')">{{ $t('登录') }}</view>
				</view>

			</view>
		</view>
		<view style="">
			<!-- <view class="row row-center pl-15 pr-15">
				<view style="width: 180px;line-height: 50px;" class="xs-hidden pt-15 mr-15">
					<view class="bg-fff pd-15 nav-left">
						<view v-for="(item,index) in list" :key="index" class="row row-center" :class="router == 'pages'+item.url ?  'nav-left-active' : ''" @click="$skip.to(item.url)">
							<i-icon :name="item.icon" :color=" router == 'pages'+item.url ? '#fff' : ''" size="18px"></i-icon>
							<view class="ml-10" style="width: 80px;">{{ $t(item.name) }}</view>
						</view>
					</view>
				</view>
				<view class="row-auto pt-15 pb-15" style="background-color: #fafafa;">
					<slot></slot>
				</view>
			</view> -->
			<slot></slot>
		</view>
		<uni-popup type="left" ref="leftNav" mask-background-color="rgba(255,255,255,0)">
			<view class="sm-hidden md-hidden">
				<view style="height: 70px;width: 260px;" @click="changeNav()"></view>
				<view style="width: 260px;line-height: 50px;padding-top: 30px;height: calc(100vh - 70px);"
					class="bg-fff box-shadow pd-15">
					<view v-for="(item,index) in navList" :key="index" class="row row-center pointer pl-15 b-r-10"
						:class="router == 'pages'+item.url ?  'nav-left-active' : ''" @click="selectNav(item)">
						<i-icon :name="item.icon" :color=" router == 'pages'+item.url ? '#fff' : ''"
							size="18px"></i-icon>
						<view class="ml-10 row-auto">{{ $t(item.name) }}</view>
					</view>
					<view class="row align-center" v-if="user_info">
						<view class="mr-15 ml-15" @click="$skip.to('/user/index')">{{ user_info.user_name }}</view>
						<view class="btn btn-xs btn-default btn-circle-xs" @click="$skip.to('logout')">{{ $t('退出') }}</view>
					</view>
					<view v-else class="ml-15 mt-15">
						<view class="btn btn-sm xs-1-3" @click="$skip.to('login')">{{ $t('登录') }}</view>
					</view>
				</view>
			</view>

		</uni-popup>
		<view style="position: fixed;bottom: 15px;right: 15px;z-index: 9999999;">
			<view class="b-r  flex-center box-shadow row" style="background-color: rgba(255, 255, 255, .7);padding: 5px 10px;" @click="$skip.to(kefu)">
				
				<view class="l-h-30 t-center" style="color: #178FCF;">
					<view class="row align-center" style="border-bottom: 1px solid #c6e3f3;">
						<gt-img class="pointer" :src="$var.apiUrl + '/img/platform/telegram.png'" style="width: 20px;height: 20px;"></gt-img>
						<view class="pointer ml-10 "  @click="$skip.to('https://t.me/kund_ai')">{{ $t('群组') }}</view>
					</view>
					<view class="row align-center" >
						<gt-img class="pointer" :src="$var.apiUrl + '/img/platform/telegram.png'" style="width: 20px;height: 20px;"></gt-img>
						<view class="pointer ml-10" @click="$skip.to('https://t.me/Kund_001')">{{ $t('客服') }}</view>
					</view>
					
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "gt-nav-pc",
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			info: {
				type: [Boolean, Object],
				default: function() {
					return null
				}
			}

		},
		created() {
			this.user_info = this.$var.user_info
			let routes = getCurrentPages();
			this.router = routes[routes.length - 1].route;
			console.log(this.router);
		},
		data() {
			return {
				value: 0,
				kefu: '',
				status: false,
				user_info: null,
				router: '',
				navList: [{
						url: '/index',
						name: '首页',
						icon: 'home-4-line'
					},
					{
						url: '/lucky/gift',
						name: '活动',
						icon: 'command-line'
					},
					{
						url: '/user/index',
						name: '个人中心',
						icon: 'folder-user-line'
					},
					{
						url: '/deal/load-list',
						name: '投资',
						icon: 'refund-line'
					},
					{
						url: '/user/setting',
						name: '设置',
						icon: 'folder-settings-line'
					},
				]
			}
		},
		computed: {},
		methods: {
			changeNav() {
				if (this.status) {
					this.$refs.leftNav.close();
					this.status = false;
					console.log('close');
				} else {
					this.$refs.leftNav.open();
					this.status = true;
					console.log('open');
				}
			},
			selectNav(item) {
				this.$refs.leftNav.close();
				this.status = false;
				this.$skip.to(item.url);
			}
		}
	}
</script>

<style lang="scss">
	.nav-left>view {
		cursor: pointer;
	}

	.btn-login {
		display: inline-block;
		height: 30px;
		padding: 0 10px !important;
		border-radius: 5px;
		background-color: red;
		color: #fff;
		line-height: 30px;
		margin-right: 15px;
		cursor: pointer;
	}

	.btn-register {
		display: inline-block;
		height: 30px;
		padding: 0 10px !important;
		border-radius: 5px;
		background-color: red;
		color: #fff;
		line-height: 30px;
		cursor: pointer;

	}

	.nav-left-child {
		text-align: center;
		padding: 8px 15px;
		border-radius: 50px;
		margin-right: 30px;
		color: #666;
		font-size: 18px;
	}

	.nav-left-active {
		background-color: #5492F6;
		color: #fff;
		font-size: 14px;
	}

	/* 小尺寸 */
	@media (max-width: 768px) {
		.gt-nav-pc {
			.box {
				display: flex;

				padding: 10px 10px;

				.box-logo {
					display: flex;
					flex-direction: row;
					align-items: center;
				}

				.img {
					width: 76px;
					height: 38px;
					background-color: red;
				}

				.nav-list {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-end;
					flex-grow: 1;
					width: 0;
				}

				.btn-nav {
					margin-right: 15px;
				}
			}
		}
	}

	/* 大尺寸 */
	@media (min-width: 768px) {
		.gt-nav-pc {
			.box {
				padding: 5px 15px;
				display: flex;

				.img {
					width: 50px;
					height: 50px;
					background-color: red;
				}

				.nav-list {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-end;
					flex-grow: 1;
					width: 0;
				}

				.nav-list>.child,
				.nav-list-pull>.child,
				.nav-list-put>.child {
					margin-right: 30px;
				}

				.btn-nav {
					display: none;
				}
			}
		}
	}
</style>